<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <router-link to="/Home">主页</router-link>
        <router-link to="/dian">内容页1</router-link>
        <router-link to="/dian2">内容页2</router-link>
        <router-link to="/login">登录</router-link>
        <button @click.stop="goback">回退</button>
        <router-view></router-view>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        let Home = {
            template : `
                <h1>主页{{massge}}
                    <router-view></router-view>
                    </h1>
            `,
            data : function(){
                return {
                    massge : "完蛋"
                }
            },
        };
        let dian = {
            template : `
                <h2>内容页{{$route.meta}}</h2>
            `,
        };
        let user = {
            template : `
                <h3>你是谁,你{{$route.meta[0]}}
                    <router-view></router-view>
                    </h3>
            `,
        }
        let users = {
            template : `
                <h3>你又是谁,你{{$route.meta[1]}}
                    <router-view></router-view>
                    </h3>
            `,
        }
        let routes = [
            {
                path : "/home",
                name : "Home",
                component : Home,
                children : [
                    {
                        meta : ["儿子"],
                        path : "user",
                        component : user,
                        created() {
                            console.log(1);
                        },
                        children : [{
                            path : "users",
                            component : users,
                            meta : ["儿子","孙子"],
                        }],
                    }
                ],
            },
            {
                path : "/dian",
                name : "dian",
                component : dian,
                meta : ["数据","算法","结果"],
            },
            {
                path : "/dian2",
                component : () => import("./pulic.js")
            },
            {
                path : "/login",
                component : () => Promise.resolve({
                    template : `
                        <h1>登录</h1>
                    `,
                }),
            },
            {
                path : "/404",
                component : () => import("./pulic.js"),
                alias : "/123"
            },
            {
                path : "*",
                redirect : "/404"
            }
        ];
        let router = new VueRouter({
            routes,
        });
        // router.beforeEach((to, from, next) => {
        //     if(to.path != "/login" && Math.random()<0.5){
        //         console.log(to,from);
        //         next("/login");
        //     }else{
        //         next();
        //     }
        // });
        // let orginalPush = VueRouter.prototype.push;
        // VueRouter.prototype.push = function(location, onComplete, onAbort){
        //     return orginalPush.call(this,location,onComplete, onAbort).catch(err=>err);
        // };
        // let orginalReplace = VueRouter.prototype.replace;
        // VueRouter.prototype.replace = function(location, onComplete, onAbort){
        //     return orginalReplace.call(this,location,onComplete, onAbort).catch(err=>err);
        // }
        let vm = new Vue({
            el : "#box",
            router,
            methods: {
                goback : function(){
                    this.$router.go(-1);
                },
            },
        });
    </script>
</body>
</html>